<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">我的资质</block>
			</cu-custom>
			<view class="cu-bar bg-white solid-bottom margin-top animation-scale-down"
				:style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class="cuIcon-title text-green"></text> 已通过
				</view>
			</view>
			<view class="cu-list menu animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<uni-list v-for="item in passList" :key = "item.id">
					<uni-list-item  :title="item.name" >
						<template v-slot:footer>
							<view class="slot-box">
								<uni-tag text="已通过" type="success" :inverted="true"></uni-tag>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view class="cu-bar bg-white solid-bottom margin-top animation-scale-down"
				:style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class="cuIcon-title text-blue"></text> 审核中
				</view>
			</view>
			<view class="cu-list menu animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<uni-list v-for="item in verifyList" :key = "item.id">
					<uni-list-item  :title="item.name" >
						<template v-slot:footer>
							<view class="slot-box">
								<uni-tag text="审核中" type="primary" :inverted="true"></uni-tag>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view class="cu-bar bg-white solid-bottom margin-top animation-scale-down"
				:style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class="cuIcon-title text-red"></text> 未通过审核
				</view>
			</view>
			<view class="cu-list menu animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<uni-list v-for="item in notPassList" :key = "item.id">
					<uni-list-item  :title="item.name" >
						<template v-slot:footer>
							<view class="slot-box">
								<uni-tag text="未通过审核" type="error" :inverted="true"></uni-tag>
								<uni-tag text="点击修改" type="default" :inverted="true" style="margin-left: 10px;" @click="itemClick(item)"></uni-tag>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view class="cu-bar bg-white solid-bottom margin-top animation-scale-down"
				:style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class="cuIcon-title text-cyan"></text> 添加资质
				</view>
			</view>
			<view class="cu-list menu animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<uni-list v-for="category in categoryList" :key = "category.id">
					<uni-list-item  :title="category.name" >
						<template v-slot:header>
							<view class="slot-box">
								<text :class="category.flag"></text>
							</view>
						</template>
						<template v-slot:footer>
							<view class="slot-box">
								<uni-tag text="选择资质项" type="warning" :inverted="true" style="margin-left: 10px;" @click="categoryClick(category)"></uni-tag>
							</view>
						</template>
					</uni-list-item>
					<view class="" v-show="category.isShow">
						<view class="" v-for="item in category.list" :key = "item.id">
							<uni-card>
								<text>{{item.name}}</text>
								<view  style="margin-left: 85%;">
									<uni-icons color="#2979ff" type="plus-filled" size="30" @click="itemClick(item)"></uni-icons>
								</view>
							</uni-card>
						</view>
					</view>
				</uni-list>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'qualification',
		data() {
			return {
				right: "cuIcon-right text-black",
				unfold: "cuIcon-unfold text-black",
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
				},
				passList:[
					{
						id: "117",
						name: "asgjfgdgf",
						score: "10",
					}
				],
				verifyList:[
					{
						id: "1171",
						name: "asgjfgdgaff",
						score: "10",
					}
				],
				notPassList:[
					{
						id: "11712",
						name: "asgjfgdgasgfaff",
						score: "10",
					}
				],
				categoryList:[
					{
						id:	"213236",
						name:"111111111",
						isShow: false,
						list:[
							{
								id: "4354675",
								name: "标准项1",
								score: "10",
							},
							{
								id: "43546751",
								name: "标准项2",
								score: "10",
							}
						],
						flag:"cuIcon-right text-black",
					},
					{
						id:	"2132367",
						name:"2222222222",
						isShow: false,
						list:[
							{
								id: "43546751",
								name: "标准项1",
								score: "10",
							},
							{
								id: "435467511",
								name: "标准项2",
								score: "10",
							}
						],
						flag:"cuIcon-right text-black",
					},
					{
						id:	"2132361",
						name:"33333333",
						isShow: false,
						list:[
							{
								id: "43546752",
								name: "标准项1",
								score: "10",
							},
							{
								id: "435467512",
								name: "标准项2",
								score: "10",
							}
						],
						flag:"cuIcon-right text-black",
					},
					{
						id:	"2132362",
						name:"44444444444",
						isShow: false,
						list:[
							{
								id: "43546753",
								name: "标准项1",
								score: "10",
							},
							{
								id: "435467513",
								name: "标准项2",
								score: "10",
							}
						],
						flag:"cuIcon-right text-black",
					},
					{
						id:	"2132363",
						name:"555555555",
						isShow: false,
						list:[
							{
								id: "43546754",
								name: "标准项1",
								score: "10",
							},
							{
								id: "435467514",
								name: "标准项2",
								score: "10",
							}
						],
						flag:"cuIcon-right text-black",
					},
					{
						id:	"2132364",
						name:"6666666",
						isShow: false,
						list:[
							{
								id: "43546755",
								name: "标准项1",
								score: "10",
							},
							{
								id: "435467515",
								name: "标准项2",
								score: "10",
							}
						],
						flag:"cuIcon-right text-black",
					},
				],
			};
		},
		created() {
		},
		activated() {
			this.getSubmitList()
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.getCategoryList()
			},
			getSubmitList() {
				this.$http.post(`/base/znzfEmployeeScoreItem/getEmployeeScoreItemList?userId=${this.$store.getters.userid}`).then(res => {
					console.log(5,res.data.result)
					this.passList = [], this.verifyList = [], this.notPassList = []
					res.data.result.forEach(item => {
						let temp = {
							id:item.id,
							name: "",
							score: "",
						}
						for(let category of this.categoryList) {
							for(let c of category.list) {
								if (item.scoreItemId == c.id) temp.name = c.name
							}
						}
						if(item.state == "1") this.verifyList.push(temp)
						else if (item.state == "0") this.passList.push(temp)
						else if (item.state == "2") this.notPassList.push(temp)
					})
					console.log(this.passList, this.verifyList, this.notPassList)
				})
			},
			getCategoryList() {
				this.$http.get(`/base/znzfScoreStandard/list`).then(res => {
					this.categoryList = []
					res.data.result.records.forEach(category => {
						let temp = {
							id: category.id,
							name: category.title,
							isShow: false,
							list: [],
							flag:"cuIcon-right text-black",
						}
						this.$http.get(`/base/znzfScoreStandard/queryZnzfScoreStandardItemByMainId?id=${category.id}`).then(res => {
							res.data.result.forEach((item,index) => {
								let temp1 = {
									id: item.id,
									score: item.score,
									name: item.name,
								}
								temp.list.push(temp1)
							})
						})
						this.categoryList.push(temp)
					})
					console.log(this.categoryList)
					this.getSubmitList()
				})
			},
			categoryClick(e) {
				e.isShow = !e.isShow
				if(e.flag == this.right) e.flag = this.unfold
				else e.flag = this.right
			},
			itemClick(e) {
				this.$Router.push({name:'addQualification', params:e})
			},
			
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}
</style>
